import React, { useState, useEffect, useLayoutEffect, useRef } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Avatar, Grid, SearchBar } from "antd-mobile";
// Import Swiper styles
import "swiper/css";
import "swiper/css/effect-cards";
import "./styles.scss";
// import required modules
import { EffectCards } from "swiper";
import { bannerGet, IBannerType } from "@/api/home";
import { courseGet } from "@/api/course";
import { CourseType } from "@/types/course";
import Course from "@/components/course";
import BScroll from "@better-scroll/core";
import MouseWheel from "@better-scroll/mouse-wheel";
import { useUserStore } from "@/store/user";
import { usePlayerStore } from "@/store/player";
BScroll.use(MouseWheel);
type Props = {};
function getImageUrl(index: number) {
  return new URL(`../../assets/img/ic_today_${index + 1}.png`, import.meta.url)
    .href;
}
export default function Tody({}: Props) {
  const [courseList, setCourseList] = useState<Array<CourseType>>([]);
  const [banner, setBanner] = useState<Array<IBannerType>>([]);
  const wrapRef = useRef<HTMLDivElement>(null);
  const gridData = ["专注闹钟", "呼吸训练", "睡眠助手", "解压木鱼"];
  const [opacity, setOpacity] = useState<number>(0);
  const { userInfo } = useUserStore((state) => state);
  const { popShow, togglePopShow, changePopData, togglePlay } = usePlayerStore(
    (state) => state
  );
  useEffect(() => {
    bannerGet().then((res) => {
      setBanner(res.data.results);
      //如何等到setBanner执行渲染完毕后再初始化betterScroll
      setTimeout(() => {
        let wrapper = wrapRef!.current as HTMLDivElement;
        let bs = new BScroll(wrapper, {
          probeType: 3, //控制scroll事件的派发时机
          click: true, //开启内容点击
          mouseWheel: {
            //开启鼠标滚轮
            speed: 20,
            invert: false,
            easeTime: 300,
          },
        });
        bs.on("scroll", (position: any) => {
          // console.log(position.x, position.y);
          let y = Math.abs(position.y);
          if (y < 290) {
            setOpacity(y / 300);
          }
        });
      }, 300);
    });
    loadMore();
  }, []);
  const loadMore = async () => {
    courseGet().then((res) => {
      let { results } = res.data;
      setCourseList(results);
    });
  };
  return (
    <div className="today-cont">
      <div className="header" style={{ opacity }}>
        Have a NiceDay!
      </div>
      <div className="wapper" ref={wrapRef}>
        <div className="content">
          <div className="user">
            <div>
              <h1>加入NiceDay</h1>
              <p>
                {userInfo
                  ? `正在访问账号:${userInfo.username}`
                  : "注册或登录账号"}
              </p>
            </div>
            <Avatar src={userInfo && userInfo.avatar ? userInfo.avatar : ""} />
          </div>
          <div className="search-cont">
            <SearchBar placeholder="点swiper体验播放器、点列表文字访问详情" />
          </div>
          <Swiper
            effect={"cards"}
            grabCursor={true}
            modules={[EffectCards]}
            className="mySwiper"
          >
            {banner.map((item, index) => {
              return (
                <SwiperSlide
                  key={index}
                  onClick={() => {
                    togglePlay(false);
                    changePopData(item);
                    togglePopShow(true);
                  }}
                >
                  <img src={item.img} alt="" />
                </SwiperSlide>
              );
            })}
          </Swiper>
          <Grid columns={4} gap={8}>
            {gridData.map((item, index) => {
              return (
                <Grid.Item className="my-grid-item" key={index}>
                  <img src={getImageUrl(index)} alt="" />
                  <h3>{item}</h3>
                </Grid.Item>
              );
            })}
          </Grid>
          <Course list={courseList} isCollect={false} />
        </div>
      </div>
    </div>
  );
}
